@use 'sass:math'

@import './fonts.sass'
@import './prism-theme.sass'

.material-icons
  font-family: 'Material Icons'
  font-weight: 400
  font-style: normal
  line-height: 1
  letter-spacing: normal
  text-transform: none
  white-space: nowrap
  word-wrap: normal
  direction: ltr
  -webkit-font-feature-settings: 'liga'
  -webkit-font-smoothing: antialiased

.primary-line-height
  line-height: 1.5

.normal-line-height
  line-height: normal

.doc-technical
  font-family: $font-family-technical
  font-weight: $font-weight-technical
  font-size: $font-size
  color: $light-text
  background-color: $light-bg
  text-rendering: optimizeLegibility
  -webkit-font-smoothing: auto

.doc-brand
  font-size: $font-size-brand
  line-height: 1.5

.doc-brand,
.doc-header-menu
  font-family: $font-family-brand
  font-weight: $font-weight-brand

// resets .doc-technical above to Quasar original
.doc-example-typography
  font-size: 14px
  line-height: 1.5em

strong
  font-weight: 700

ul
  margin: 0 0 16px

.doc-token
  display: inline-block
  padding: 4px 6px
  font-size: $font-size
  line-height: $font-size
  border-radius: $generic-border-radius
  font-family: inherit
  color: $brand-primary
  vertical-align: baseline
  border: 1px solid currentColor

.doc-note
  font-size: $font-size
  border-radius: $generic-border-radius
  margin: 16px 0
  padding: 16px
  border-width: 1px
  border-style: solid

  > p, > ul
    margin-bottom: 0

  &:not(.doc-note--tip):not(.doc-note--warning):not(.doc-note--danger)
    background-color: $grey-2
    border-color: $separator-color
    .doc-note__title,
    .doc-link,
    .doc-token
      color: $brand-primary
    .doc-token
      border-color: $brand-primary

  &--tip
    background-color: scale-color($positive, $lightness: 85%)
    border-color: $positive
    .doc-note__title,
    .doc-link,
    .doc-token
      color: scale-color($positive, $lightness: -40%)
    .doc-token
      border-color: scale-color($positive, $lightness: -40%)

  &--warning
    background-color: scale-color($warning, $lightness: 85%)
    border-color: scale-color($warning, $lightness: -30%)
    .doc-note__title,
    .doc-link,
    .doc-token
      color: scale-color($warning, $lightness: -40%)
    .doc-token
      border-color: scale-color($warning, $lightness: -40%)

  &--danger
    background-color: scale-color($negative, $lightness: 90%)
    border-color: $negative
    .doc-note__title,
    .doc-link,
    .doc-token
      color: $negative
    .doc-token
      border-color: $negative

  &--details
    .doc-note__title
      cursor: pointer
      display: list-item

    &:not([open])
      > .doc-note__title
        padding-bottom: 0

  &__title
    font-weight: 700
    letter-spacing: $letter-spacing-brand
    padding-bottom: 8px

.doc-heading
  color: $brand-primary
  word-break: break-word
  letter-spacing: $letter-spacing-brand
  padding: 0
  line-height: 1.1em
  margin: 2.5em 0 1em

  &:not(#introduction)
    cursor: pointer

    &:after
      content: ' #'
      opacity: 0
    &:hover:after
      opacity: 1

.doc-h1
  font-size: 2.4em
  font-weight: 700
  margin: 0 0 1em !important
  display: flex
  align-items: center

.doc-h2
  font-size: 1.8em
  font-weight: 600
  padding-bottom: 8px !important
  border-bottom: 1px solid $separator-color

.doc-h3
  font-size: 1.6em
  font-weight: 500

.doc-h4
  font-size: 1.4em
  font-weight: 500
  &:before
    content: '» '
    vertical-align: text-top

.doc-h5
  font-size: 1em
  font-weight: 500
  &:before
    content: '»» '
    vertical-align: text-top

.doc-h6
  font-size: 1em
  font-weight: 400
  &:before
    content: '»»» '
    vertical-align: text-top

@media (max-width: 850px)
  .doc-h1
    font-size: 1.7em
  .doc-h2
    font-size: 1.4em
  .doc-h3
    font-size: 1.3em
  .doc-h4
    font-size: 1.2em
  .doc-h5
    font-size: 1.1em

.doc-img
  max-width: 100%

.doc-page-listing
  .q-icon
    font-size: 20px
    margin-right: 8px
    color: $brand-primary

kbd
  font-family: $font-family-examples
  white-space: nowrap
  display: inline-block
  padding: 4px 4px 6px
  font-size: .8em
  line-height: .8em
  border-radius: 4px
  margin: 0 .2em
  color: $grey-8
  background: linear-gradient(-225deg,#d5dbe4,#f8f8f8)
  box-shadow: inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px rgba(30,35,90,0.4)

.doc-gdpr
  font-family: $font-family-brand
  max-width: 360px
  &,
  .q-btn
    font-weight: 700

.q-page > .q-badge + .doc-example
  margin-top: 0

body.q-scroll--lock .q-page
  > *
    overflow-anchor: none

  > .q-scroll--anchor
    overflow-anchor: auto

// makes the scroll bar look better for the drop-down menus in the header
::-webkit-scrollbar
  height: 12px
  width: 14px
  background: transparent
  z-index: 12
  overflow: visible

::-webkit-scrollbar-thumb
  width: 10px
  background-color: $brand-primary
  border-radius: 10px
  z-index: 12
  border: 4px solid rgba(0, 0, 0, 0)
  background-clip: padding-box
  transition: background-color $header-quick-transition
  margin: 4px
  min-height: 32px
  min-width: 32px

::-webkit-scrollbar-thumb:hover
  background: $brand-primary

.shadow-bottom
  &-small
    box-shadow: $shadow--small

  &-medium
    box-shadow: $shadow--medium

  &-large
    box-shadow: $shadow--large

.heading
  display: block
  text-align: center
  text-transform: uppercase

  &--large
    color: $brand-primary
    font-size: 24px
    font-weight: 700
    letter-spacing: 6.75px
    margin: 12px 0 36px 0

    @media (min-width: $breakpoint-sm-min)
      font-size: 36px

  &--medium
    color: $brand-primary
    font-size: 18px
    font-weight: 700
    letter-spacing: 4.5px

    @media (min-width: $breakpoint-sm-min)
      font-size: 24px

  &--small
    color: white
    font-size: 16px
    font-weight: 400
    letter-spacing: 3.75px
    text-transform: initial

    @media (min-width: $breakpoint-sm-min)
      font-size: 20px

  &--quote
    color: $brand-primary
    font-size: $font-size
    font-weight: 400
    letter-spacing: 3px
    text-transform: initial

    @media (min-width: $breakpoint-sm-min)
      font-size: 16px

.landing-mb--large
  margin-bottom: 64px
  @media (min-width: $breakpoint-sm-min)
    margin-bottom: 100px

.landing-mx--large
  margin-left: 64px
  margin-right: 64px
  @media (min-width: $breakpoint-sm-min)
    margin-left: 100px
    margin-right: 100px

.landing-my-large
  margin: 36px 0

.call-to-action-btn
  background: $brand-accent
  color: #fff
  font-weight: 700
  font-size: $font-size
  letter-spacing: 2.63px

  &.q-btn--rectangle
    padding: 16px

.doc-page-table
  width: fit-content
  max-width: 100%
  th,
  td
    font-size: $font-size !important
  th
    font-weight: 700
    letter-spacing: $letter-spacing-brand

.header-btn
  color: $header-btn-color--light
  transition: color $header-transition

  &.q-btn--round
    font-size: 12px
    .q-icon
      font-size: 21px

  &:not(.disabled):hover
    color: $header-btn-hover-color--light

  .q-focus-helper
    &,
    &:before,
    &:after
      transition: background-color $header-transition, opacity $header-transition

.header-toolbar
  color: $header-btn-color--light
  background: #fff

.header-tabs
  &,
  .q-tabs__content
    background: #fff
    letter-spacing: $letter-spacing-brand
    border-radius: $generic-border-radius $generic-border-radius 0 0

.header-toolbar,
.header-tabs,
.header-tabs .q-tab
  min-height: 40px
  transition: color $header-transition

.doc-heading .q-badge,
.header-badge
  color: $light-bg
  background: $brand-primary
  vertical-align: super
  letter-spacing: $letter-spacing-brand
  padding: 4px 8px

$additional-colors: ('brand-primary' $brand-primary, 'brand-secondary' $brand-secondary, 'brand-accent' $brand-accent)
@each $color-name, $color in $additional-colors
  :root
    --q-#{$color-name}: #{$color}

  .bg-#{$color-name}
    background-color: var(--q-#{$color-name}) !important

  .text-#{$color-name}
    color: var(--q-#{$color-name}) !important

$text-size-list: 12, 14, 16, 20, 24, 36
@each $text-size in $text-size-list
  .text-size-#{$text-size}
    font-size: $text-size + px !important

$letter-spacing-list: 40, 100, 225, 263, 300, 375, 450
@each $letter-spacing in $letter-spacing-list
  .letter-spacing-#{$letter-spacing}
    letter-spacing: math.div($letter-spacing,100) + px !important

body.body--dark
  .doc-technical
    color: $dark-text
    background: #080E1A

  .header-btn
    color: $header-btn-color--dark
    &:not(.disabled):hover
      color: $header-btn-hover-color--dark

  .header-toolbar
    color: $header-btn-color--dark
    background: $dark-bg

  .header-tabs
    &,
    .q-tabs__content
      background: $dark-bg

  .doc-heading .q-badge,
  .header-badge
    color: $dark-bg

  .doc-img
    background-color: $ship-shell
    border-radius: $generic-border-radius

  .doc-note
    &:not(.doc-note--tip):not(.doc-note--warning):not(.doc-note--danger)
      background-color: $dark-pill
      border-color: scale-color($brand-primary, $lightness: -50%)
      .doc-token
        border-color: #ddd
        color: #ddd

    &--tip
      border-color: $positive
      background-color: scale-color($positive, $lightness: -85%)
      .doc-note__title,
      .doc-link,
      .doc-token
        color: $positive
      .doc-token
        border-color: $positive

    &--warning
      border-color: $warning
      background-color: scale-color($warning, $lightness: -85%)
      .doc-note__title,
      .doc-link,
      .doc-token
        color: $warning
      .doc-token
        border-color: $warning

    &--danger
      border-color: $negative
      background-color: scale-color($negative, $lightness: -80%)

  .doc-h2
    border-color: $separator-dark-color

  kbd
    color: $dark-text
    background: linear-gradient(-225deg,$brown,$brown-9)
    box-shadow: inset 0 -2px 0 0 $brown-10, inset 0 0 1px 1px $brown-8, -1px 0 0 0 $brown, 1px 0 0 0 $brown, 0 1px 0 0 $brown

.doc-card-title
  margin-left: -12px
  padding: 4px 8px 4px 28px
  position: relative
  border-radius: 3px 5px 5px 0
  background: $void-suit
  color: $header-btn-color--light
  font-size: ($font-size + 2px)
  letter-spacing: $letter-spacing-brand

  &:after
    content: ''
    position: absolute
    top: 100%
    left: 0
    width: 0
    height: 0
    border: 0 solid transparent
    border-width: 9px 0 0 11px
    border-top-color: scale-color($void-suit, $lightness: -15%)

body.body--dark .doc-card-title
  background: $floating-rock
  color: $dark-text
  &:after
    border-top-color: scale-color($floating-rock, $lightness: -30%)
